let arr=[
{countries:'中国',number:20000,id:0},
{countries:'日本',number:400,id:1},
{countries:'美国',number:8000,id:2},
{countries:'韩国',number:9000,id:3},
{countries:'英国',number:1000,id:4},
{countries:'俄罗斯',number:8000,id:5},
{countries:'法国',number:9000,id:6},
{countries:'新加坡',number:7000,id:7},
]
let sousuoarr = []
let maxPage
let dangqianye = 1
$(function(){
    sousuo()
    // 查询功能
    let chaxun1 = document.getElementById('chaxun')
    chaxun1.onkeydown=(function(e){
            if(e.keyCode=='13'){
                sousuo()
            }
        
    })
    function sousuo(){
        let chaxun = $('#chaxun').val()
        sousuoarr = [...arr]
        // 筛选，删掉不符合条件的
        if(chaxun!=''){
            for(let i=0;i<sousuoarr.length;i++){
                if(sousuoarr[i].countries!=chaxun){
                    sousuoarr.splice(i,1)
                    i--
                }
            }
        }
        showpage(sousuoarr)
        showarr(sousuoarr,1)
        $('#chaxun').val('')
    }
    // 重置
    $('#reset').click(function(){
        sousuo()
     })
    // 渲染数组
    function show(data){
        $('#mytable').html('')
        for(let i=0;i<data.length;i++){
            $('#mytable').append(
                `<tr>
                  <td>${data[i].countries}</td>
                  <td>${data[i].number}</td>    
                  <td>
                    <a data-toggle="modal" data-target="#deleteModal" data-id='${data[i].id}' class='del'>删除</a>
                    <a class='xiugai' data-id='${data[i].id}' data-toggle="modal" data-target="#mydiv1" 
                    data-whatever="@mdo">修改</a>
                  </td>
                </tr>
              `
            )
            
        }
    }
    // 分割数据，让一页显示三个
    function showarr(data,num){
        let shuliang = (num-1)*4 // 一页显示四个
        let newarr = data.slice(shuliang,shuliang+4)
        show(newarr)
        dangqianye=parseInt(num)
        $('.page').eq(num-1).addClass('active').siblings().removeClass('active')
    }
    // 页码展示
    function showpage(data){
        maxPage=Math.ceil(data.length/4)
        $('#yema').html('')
        for(let i=1;i<=maxPage;i++){
            $('#yema').append(`<div class='page'>${i}</div>`)
        }
    }
    // 点击页码跳转
    $('#yema').on('click','.page',function(){
        showarr(sousuoarr,$(this).text())
    })
     // 上一页
     $('#pre').click(function(){
        if(dangqianye>1){
            let page = dangqianye-1
            showarr(sousuoarr,page)
        }else{
            alert('这已经是第一页了')
        }
    })
    //下一页
    $('#next').click(function(){
        if(dangqianye<maxPage){
            let page = dangqianye+1
            showarr(sousuoarr,page)
        }else{
            alert('这已经是最后一页了')
        }
    })
    //添加国家
    $('#addStu').on('click',function(){
        let name = $('#mydiv').find('.modal-body #name').val()
        let num = $('#mydiv').find('.modal-body #numb').val()
        let obj={}
        if(name!=''&&num!=''){
            obj.id=arr.length
            obj.countries=name
            obj.number=num
            arr.push(obj)
            sousuoarr=[...arr]
            showpage(sousuoarr )
            showarr(sousuoarr,1)
        }else{
            alert('请完整的输入所有信息')
        }
        $('#mydiv').modal('hide')
                $('#mydiv').find('.modal-body #name').val('')
                $('#mydiv').find('.modal-body #numb').val('')
    })
    // 删除
    $('#mytable').on('click','.del',function(){
        let num = $(this).attr('data-id')
        let sbt=document.getElementById('sbt')
        sbt.onclick=function(){
            for(i=0;i<arr.length;i++){
        if(arr[i].id==num){
            arr.splice(i,1)
        }   
        }
        for(let i=num;i<arr.length;i++){
            let a= arr[i].id
            a-=1
            arr[i].id=a 
            }
                sousuoarr=[...arr]
                showpage(sousuoarr )
                showarr(sousuoarr,dangqianye)  
                $('#deleteModal').modal('hide') 
        }

    })
    //修改
    $('#mytable').on('click','.xiugai',function(){
        let num = $(this).attr('data-id')
        let addStu1=document.getElementById('addStu1')
        addStu1.onclick=function(){
                let name = $('#mydiv1').find('.modal-body #name1').val()
                let num1 = $('#mydiv1').find('.modal-body #numb1').val()
                
            if(name!=''&&num1!=''){
                for(i=0;i<arr.length;i++){
                    if(arr[i].id==num){
                        arr[i].countries=name
                        arr[i].number=num1
                    }    
            }
                sousuoarr=[...arr]
                showpage(sousuoarr )
                showarr(sousuoarr,dangqianye)
            }else{
                alert('请完整的输入所有信息')
            }
            
                $('#mydiv1').modal('hide')
                $('#mydiv1').find('.modal-body #name1').val('')
                $('#mydiv1').find('.modal-body #numb1').val('')

        }

    })


})